<!--
 * @Descripttion: 节假日管理
 * @version:
 * @Author: 张文韬
 * @Date: 2020-10-14 10:00:17
 * @LastEditors: 张文韬
 * @LastEditTime: 2020-10-14 10:00:21
-->
<template>
  <el-card class="box-card">
    <el-row>
      <el-col :span="14">
        <el-select v-model="selectedYear"
                   placeholder="请选择年份"
                   :value="selectedYear"
                   @change="handleChangeSelectYear">
          <el-option :label="curYear-2"
                     :value="curYear-2"></el-option>
          <el-option :label="curYear-1"
                     :value="curYear-1"></el-option>
          <el-option :label="curYear"
                     :value="curYear"></el-option>
          <el-option :label="curYear+1"
                     :value="curYear+1"></el-option>
          <el-option :label="curYear+2"
                     :value="curYear+2"></el-option>
        </el-select>
      </el-col>
      <el-col :span="6">
        <el-col :span="7"><span>是否选中周末：</span></el-col>
        <el-col :span="17">
          <el-radio-group v-model="isSelectWeekend" @change="handleSelectWeekends">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
        </el-col>
      </el-col>
      <el-col :span="4">
        <el-button type="primary"
                   @click="handleSaveData">保存
        </el-button>
      </el-col>
    </el-row>
    <YearCalendar
        v-model="selectedYear"
        :activeDates.sync="activeDates"
        @toggleDate="toggleDate"
        @update:activeDates="updateActiveDate"
        prefixClass="your_customized_wrapper_class"
        :activeClass="activeClass"
        :hideWeekend="false"
        :showYearSelector="false"
    ></YearCalendar>
  </el-card>
</template>

<script>
  import YearCalendar from 'vue-material-year-calendar'
  import { getHolidayList, saveHolidayList } from '@/api/admin.api'
  export default {
    name: 'holiday-manager',
    components: {
      YearCalendar
    },
    data() {
      return {
        // 当前年份
        curYear: new Date().getFullYear(),
        // 选中年份
        selectedYear: new Date().getFullYear(),
        // 选中日期
        activeDates: [],
        selectDate: '',
        activeClass: '',
        isSelectWeekend: 0,
        // 当前选中年的周末日期
        currentWeekendDays: []
      }
    },
    created () {
      this.handleSelectWeekends(this.isSelectWeekend)
      this.getHolidays()
    },
    methods: {
      // 网络请求获取已选日期
      getHolidays () {
        const params = { year: this.selectedYear }
        getHolidayList(params).then(res => {
         // console.log(res)
          this.activeDates = res
        })
      },
      // 获取全年的周末
      getAllWeekend(curYear) {
        let tempSel = []
        // 获取选择年限的时间
        let date = new Date((curYear + '-01-01').replace(/-/,"/"))
        let year = date.getFullYear()
        let m, d, day, dayNum = ''
        for (m = 1; m <= 12; m++) {
          switch (m) {
            case 1:
            case 3:
            case 5:
            case 7:
            case 8:
            case 10:
            case 12:
              dayNum = 31
              break
            case 4:
            case 6:
            case 9:
            case 11:
              dayNum = 30
              break
            case 2:
              if (year % 4 === 0 && year % 100 !== 0 || year % 400 === 0) {
                dayNum = 29
              } else {
                dayNum = 28
              }
              break
          }
          for (d = 1; d <= dayNum; d++) {
            date.setMonth(m - 1, d)
            day = date.getDay()
            if (day === 0 || day === 6) {
              let month = (date.getMonth()+1) > 9 ? (date.getMonth()+1) : ('0'+(date.getMonth()+1))
              let tempDate = date.getDate()>9?date.getDate():('0'+date.getDate())
              let weekendDay = date.getFullYear()+"-"+month+"-"+tempDate
              tempSel.push(weekendDay)
            }
          }
        }
        return tempSel
      },
      // 把周末日期放入数组
      mergeWeekendDays (curYear) {
        const tempSel = this.getAllWeekend(curYear)
        let tempActArr = this.activeDates
        tempSel.map((item) => {
          if (tempActArr.indexOf(item) === -1) {
            tempActArr.push(item)
          }
        })
        this.activeDates = tempActArr
      },
      // 把周末日期从数组中移除
      removeWeekendDays (curYear) {
        const tempSel = this.getAllWeekend(curYear)
        let tempActArr = this.activeDates
        tempSel.map((item)=>{
          const curIndex = tempActArr.indexOf(item)
          if (curIndex > -1) {
            tempActArr.splice(curIndex, 1)
          }
        })
        this.activeDates = tempActArr
      },
      // 处理点击日历日期事件
      toggleDate(dateInfo) {
        // console.log(dateInfo)// { date: '2010-10-23', selected: true }
      },
      // 重置组件返回的选中日期数据
      updateActiveDate(activeDates) {
        let activeArr = this.activeDates
        activeArr = JSON.parse(JSON.stringify(activeArr))
        activeArr.map((item, index) => {
          if (typeof item === 'object') {
            activeArr.splice(index, 1)
            const existIndex = activeArr.indexOf(item.date)
            if (existIndex  > -1) {
              activeArr.splice(existIndex, 1)
            }
            else {
              activeArr.push(item.date)
            }
          }
        })
        this.activeDates = activeArr
      },
      // 选择年份触发事件
      handleChangeSelectYear (e) {
        // console.log(e)
        this.isSelectWeekend = 0
        this.getHolidays()
      },
      // 网络请求保存数据
      handleSaveData () {
        if (this.activeDates.length === 0) {
          this.$message({
            message: '至少选择一个日期',
            type: 'warning'
          })
          return
        }
        let activeArr = this.activeDates
        activeArr = JSON.parse(JSON.stringify(activeArr))
        // console.log(activeArr)
        const params = { sysHolidayList: activeArr }
        saveHolidayList(params).then(res => {
          this.$message({
            message: '保存成功',
            type: 'success'
          })
        })
      },
      // 处理点击选中周末
      handleSelectWeekends(e) {
        if (e === 0) {
          this.removeWeekendDays(this.curYear)
        }
        else {
          this.mergeWeekendDays(this.curYear)
        }
      }
    }
  }
</script>
<style lang="scss" scoped>
  .box-card {
    margin: 4px;
    height: calc(100vh - 110px);
    overflow: scroll;
    .el-card__body {
      padding: 0;
    }
  }
  .el-col{
    /*text-align center*/
    height: 70px;
    align-content: center;
    line-height: 70px
  }
  .container-box {
    overflow: scroll;
  }
  .your_customized_wrapper_class{
    background-color: #0aa;
    color: white;
    .red{
      background-color: red;
      color: white;
      :after{
        /*background-image url('./assets/baseline-remove_circle-24px.svg')*/
        background-color: aquamarine;
        background-size: 100% 100%;
      }
    }
    .blue{
      background-color: #0000aa;
      color: white;
    }
    .your_customized_classname{
      background-color: yellow;
      color: black;
    }
  }
</style>


